<template>
  <div class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="col-sm-12">
        <div class="col-sm-3 ">
          <h2 style="margin-top: 5px;">字典树
            <button @click="refresh" class="btn btn-xs btn-default" type="button">刷新</button>
          </h2>
          <ul class="ztree" id="tree"></ul>
        </div>
        <div class="col-sm-9">
          <div class="ibox float-e-margins">
            <div class="ibox-content">
              <table class="table">
                <tr>
                  <td>
                    <form @submit.prevent="page(1)" accept-charset="UTF-8" class="form-inline" id="info_search_form" method="post" role="form">
                      <input id="pageNumA" name="pageNum" type="hidden" value="1">
                      <input id="parentIdA" name="parentId" type="hidden" value="">
                      <div class="form-group" id="data_5">
                        <label class="font-noraml">创建时间</label>
                        <div class="input-daterange input-group" id="datepicker">
                          <input class="input-sm form-control" name="dateBegin" placeholder="点击输入起始时间" type="text" value=""/>
                          <span class="input-group-addon">到</span>
                          <input class="input-sm form-control" name="dateEnd" placeholder="点击输入截止时间" type="text" value=""/>
                        </div>
                      </div>
                      <div class="input-group">
                        <input class="input-sm form-control" name="keyword" placeholder="请输入关键词" type="text">
                        <span class="input-group-btn">
                            <button class="btn btn-sm btn-primary" type="submit">搜索</button>
                            <button class="btn btn-sm btn-dafault" type="reset">重置</button>
                          </span>
                      </div>
                    </form>
                  </td>
                </tr>
              </table>
              <a @click="edit('a',{id:0})" class="btn btn-xs btn-success m-t" href="javascript:" v-show="staff.hasPermission('sysVariable:add')"><i class="fa fa-edit"></i> 新增/添加</a>
              <div class="table-responsive table-scrollable">
                <table class="table table-hover table-striped table-bordered">
                  <thead>
                  <tr>
                    <th style="width: 20px"></th>
                    <th class="col-md-2">编码</th>
                    <th class="col-md-2">名称</th>
                    <th class="col-md-2">创建时间</th>
                    <th></th>
                  </tr>
                  </thead>
                  <tbody v-if="result.dataCount>0">
                  <tr v-for="(item, index) in result.data">
                    <td>{{(result.pageIndex-1) * result.pageSize + index+1}}</td>
                    <td>{{item.code}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.dateCreated | date('yyyy-MM-dd HH:mm:ss')}}</td>
                    <td>
                      <a @click="edit('e',item)" class="label label-success" href="javascript:" v-show="staff.hasPermission('sysVariable:edit')"><i class="fa fa-edit"></i> 编辑</a>
                      <a @click="del(item)" class="label label-danger" href="javascript:" rel="nofollow" v-show="staff.hasPermission('sysVariable:del')"><i class="fa fa-trash-o"></i> 删除</a>
                    </td>
                  </tr>
                  </tbody>
                  <tbody v-else>
                  <tr>
                    <td colspan="5">
                      <div class="alert"><strong>{{ result | message }}</strong></div>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
              <div class="b_page" v-html="tagPages"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import '@/assets/css/style.css'

  import $ from '@/assets/js/jquery-vendor.js'
  import 'jquery.cookie'
  import axios from 'axios'
  import 'ztree'
  import '@/assets/css/zTree.css'
  import '@/assets/js/datepicker-vendor.js'
  import {$storage, axiosContentType, site} from '@/assets/js/boss'
  import '@/assets/js/pageTag'

  let zTreeObj;
  export default {
    data() {
      return {
        result: {data: {pageIndex: 1, data: []}, message: ''},
        tagPages: ''
      }
    },
    mounted() {
      let that = window.$vueApp = this;
      document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
      this.staff.init(function () {
        that.refresh();
      });
      $('.input-daterange').datepicker({
        language: 'zh-CN',
        format: 'yyyy-mm-dd',
        keyboardNavigation: !1,
        forceParse: !1,
        autoclose: !0
      });
    },
    methods: {
      tree() {
        let that = this;
        axios.post(site.sysVariable.tree, {}, axiosContentType.xWwwFormUrlencoded
        ).then(function (response) {
          var result = response.data;
          if (result.code === 0) {
            if (result.data.length === 0) {
              $('#tree').html('无数据');
              return;
            }
            zTreeObj = $.fn.zTree.init($('#tree'), {callback: {beforeClick: that.treeNodeClick}}, {isParent: true, name: '根节点', open: true, children: result.data});
            var cookie = $.cookie('zTreeX');
            if (cookie) {
              var zTreeX = JSON.parse(cookie);
              for (var i = 0; i < zTreeX.length; i++) {
                var node = zTreeObj.getNodeByParam('id', zTreeX[i]);
                zTreeObj.expandNode(node, true)
              }
            }
          } else {
            $('#tree').html(result.message);
          }
        });
      },
      page(pageIndex) {
        let that = this;
        if (!pageIndex) pageIndex = 1;
        axios.post(site.sysVariable.page + pageIndex
          , $('#info_search_form').serialize()
          , axiosContentType.xWwwFormUrlencoded
        ).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            that.result = result.data;
            that.tagPages = that.tag.page(result.data);
          } else {
            alert(result.message);
          }
        });
      },
      edit(title, item) {
        $storage.setItem(site.sysVariable.info, item.id);
        this.lbox.openMyBoxLayerB(title, site.sysVariable.view + '/edit', ['80%', '80%']);
      },
      del(item) {
        let that = this;
        if (confirm('确认删除吗?')) {
          axios.post(site.sysVariable.del + item.id, {}).then(function (response) {
            const result = response.data;
            if (result.code === 0) {
              that.tree();
              that.page(that.result.data.pageIndex);
              alert('删除成功');
            } else {
              alert(result.message);
            }
          });
        }
      },
      treeNodeExpand(treeNode) {
        // console.info('treeNodeExpand='+treeNode)
        var cookie = $.cookie('zTreeX');
        var zTreeX = null;
        if (cookie) {
          zTreeX = JSON.parse(cookie);
        }
        if (!zTreeX) {
          zTreeX = [];
        }
        if ($.inArray(treeNode.id, zTreeX) < 0) {
          zTreeX.push(treeNode.id);
        }
        $.cookie('zTreeX', JSON.stringify(zTreeX))
      },
      treeNodeCollapse(treeNode) {
        // console.info('treeNodeCollapse='+treeNode)
        var cookie = $.cookie('zTreeX');
        var zTreeX = null;
        if (cookie) {
          zTreeX = JSON.parse(cookie);
        }
        if (!zTreeX) {
          zTreeX = [];
        }
        var index = $.inArray(treeNode.id, zTreeX);
        zTreeX.splice(index, 1);
        $.cookie('zTreeX', JSON.stringify(zTreeX))
      },
      treeNodeClick(treeId, treeNode) {
        if (treeNode) {
          $('#parentIdA').val((treeNode && treeNode.id));
        } else {
          $('#parentIdA').val('');
        }
        this.page(1);
      },
      refresh() {
        this.tree();
        this.page(1);
      }
    }
  }
</script>
